<template>
  <div class="app-container">
    <div class="sidebar" v-if="showSidebar">
      <el-menu
        router
        default-active="/users"
        class="el-menu-vertical"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
      >
        <el-menu-item index="/home">
          <i class="el-icon-house"></i>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/users">
          <i class="el-icon-user"></i>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/departments">
          <i class="el-icon-office-building"></i>
          <span>部门管理</span>
        </el-menu-item>
        <el-menu-item index="/positions">
          <i class="el-icon-suitcase"></i>
          <span>岗位管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main-container">
      <div class="header-bar" v-if="$route.path !== '/login'">
        <el-button type="text" @click="handleLogout" class="logout-btn">
          <i class="el-icon-switch-button"></i>退出
        </el-button>
      </div>
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const router = useRouter()
const showSidebar = ref(true)

const handleLogout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}

watch(() => router.currentRoute.value.path, (path) => {
  showSidebar.value = path !== '/login'
}, { immediate: true })
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 210px;
  background-color: #304156;
}
.main-container {
  flex: 1;
  overflow: auto;
  position: relative;
}

.header-bar {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
}

.logout-btn {
  color: #bfcbd9;
}

.logout-btn:hover {
  color: #409EFF;
}
.el-menu-vertical {
  border-right: none;
}
</style>